import React from 'react';
import { Switch, Route } from 'react-router-dom';
import FullRoster from './component/FullRoster';
import Player from './component/Player';

// 组合在相同组件中分享共同前缀的路由是一种有用的方法。
// 这就需要简化父路由并且提供一个区域来渲染具有相同前缀的通用路由。
export default function Roster(props) {
    return (
        <div className="roster">
            <h2>This is a roster page!</h2>
            <Switch>
                <Route exact path="/roster" component={ FullRoster } />
                <Route path="/roster/:number" component={ Player } />
            </Switch>
        </div>
    );
};